<template>
	<view class="content">
		<view class="content-header-bg">
			<span>重庆市青年企业家协会</span>
		</view>
		<scroll-view scroll-y="true" class="ScrollView">
			<view class="swiperBox publicstyle">
				<up-swiper :list="list1" :displayMultipleItems='1' radius="10" circular></up-swiper>
			</view>
			<view class="CommonservicesBox publicstyle">
				<my-title :title='title1' :imageshow='false'></my-title>
			</view>
			<view class="common-tab publicstyle">
				<view class="tabBox" @click="gotabbar(item,index)" v-for="(item,index) in tabs" :key="index">
					<image class="common-image" :src="proxy.serverimageUrl + item.imageurl" mode=""></image>
					<view class="titleBox">
						<view class="title">
							{{item.title}}
						</view>
						<view class="subtitle">
							{{item.subtitle}}
						</view>
					</view>
				</view>
			</view>
			<view class="singleimage publicstyle">
				<image @click="gounder" :src="proxy.serverimageUrl+'Home/liaojie.png'" mode=""></image>
			</view>
			<view class="memberBox publicstyle">
				<my-title :title='title2' @instruct1="handinstruct" :instruct="instruct" :imageshow='true'></my-title>
				<view class="memberBox-tabs">
					<view class="tabs-item" @click="godetail(1,item)"
						v-for="(item,index) in miniProgramListdata.data.memBerInfoDtos" :key="index">
						<view class="item-avatar">
							<image class="avatarimage" v-if="!item.avatar"
								:src="proxy.serverimageUrl+'Home/touxiang.png'" mode=""></image>
							<image class="avatarimage" v-if="item.avatar" :src="item.avatar" mode=""></image>
						</view>
						<view class="item-content">
							<view class="identity">
								{{item.employmentSituation}}
							</view>
							<view class="namestyle">
								{{item.memberName}}
							</view>
							<view class="companystyle">
								{{item.workUnit}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="activityBox publicstyle">
				<my-title :title='title3' @instruct2="handinstruct" :instruct="instruct" :imageshow='true'></my-title>
				<view class="activityBox-tabs" @click="godetail(2,item)"
					v-for="(item,index) in miniProgramListdata.data.activityDtos" :key="index">
					<view class="activityBox-tabs-item">
						<image class="bgimage" v-if="item.commonFileRequests[0].url" :src="item.commonFileRequests[0].url" mode=""></image>
						<image class="bgimage" v-else :src="proxy.serverimageUrl+'Home/huodong1.png'" mode=""></image>
						<view class="content-text">
							<p class="p1">{{item.activityName}}</p>
							<p class="p2"><span class="labelstyle1" v-if="item.status == 1">进行中</span><span
									v-if="item.status == 2" class="labelstyle">已结束</span>{{item.activityBeginTime}}</p>
						</view>
					</view>
				</view>
				<view class="Policyinterpretation">
					<my-title :title='title4' @instruct3="handinstruct" :instruct="instruct"
						:imageshow='true'></my-title>

					<view class="Policyinterprcetation-Box">
						<view class="Box-item" @click="godetail(3,item)"
							v-for="(item,index) in miniProgramListdata.data.articleDtos" :key="index">
							<view class="item-left">
								<image :src="item.url" mode=""></image>
							</view>
							<view class="item-right">
								<p class="title">{{item.title}}</p>
								<view class="right-numanddate">
									<view class="">
										阅读{{item.readingFrequency}}
									</view>
									<view class="">
										{{item.releaseTime}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="CommerceBox">
					<!-- <view class="publicstyle"> -->
					<my-title :title='title5' :imageshow='true' @instruct4="handinstruct"
						:instruct="instruct"></my-title>
					<!-- </view> -->
					<view class="CommerceBox-tabs">
						<view class="CommerceBox-tabs-item"
							v-for="(item,index)  in miniProgramListdata.data.friendshipAssociationEntities"
							:key="index">
							<image :src="item.url" mode=""></image>
							<p class="Commercetext">{{item.name}}</p>
						</view>
					</view>
				</view>
				<view style="width: 100%; height: 50rpx;"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		miniProgramList,
		getCondition,
		getHome
	} from '../../utils/api.js'
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app';
	onLoad(() => {})
	onShow(() => {
		getminiProgramList()
	})
	const params = ref({
		pageNum: 1,
		pageSize: 3,
		keyWord: "",
	})
	const gounder = () => {
		uni.navigateTo({
			url: '/subpages/understand/index'
		})
	}
	/*用于头部组件返回事件*/
	const instruct = ref('')

	const handinstruct = (instruct) => {

		switch (instruct) {
			// 返回
			case 'back1':
				uni.switchTab({
					url: '/pages/member/index'
				})
				break;
			case 'back2':
				uni.switchTab({
					url: '/pages/activity/index'
				})
				break;
			case 'back4':
				uni.navigateTo({
					url: '/subpages/friendly/index'
				})
				break;
			case 'back3':
				uni.navigateTo({
					url: '/subpages/article/index'
				})
				break;
		}
	}
	const gotabbar = (item, index) => {
		if (index === 0) {
			uni.navigateTo({
				url: item.gopages
			})
		} else {
			uni.switchTab({
				url: item.gopages
			})
		}

	}
	const miniProgramListdata = reactive({
		data: {}
	})
	const getminiProgramList = () => {
		getHome().then(res => {
			miniProgramListdata.data = res.data
		})
	}
	const godetail = (type, item) => {
		if (type == 1) {
			uni.navigateTo({
				url: '/subpages/memberdetail/index?mid=' + item.mid
			})
		} else if (type == 2) {
			uni.navigateTo({
				url: '/subpages/activitydetail/index?aid=' + item.aid
			})
		} else if (type == 3) {
			uni.navigateTo({
				url: '/subpages/article/detail?aid=' + item.aid
			})
		}

	}
	/*传输给组件的参数 title1-5 引用组件5次*/
	const imageshow = ref(false)
	const title1 = ref('常用服务')
	const title2 = ref('会员风采')
	const title3 = ref('最新活动')
	const title4 = ref('政策解读')
	const title5 = ref('友好商协会')
	// 使用 reactive 创建响应式数组  
	const list1 = reactive([
		'http://1001.zmxeye.com/youthAssociation/static/Home/banner1.jpg',
		'http://1001.zmxeye.com/youthAssociation/static/Home/banner2.png',
	]);
	const tabs = reactive([{
			imageurl: 'Home/xinwen.png',
			title: '新闻政策',
			subtitle: '了解最新政策',
			gopages: '/subpages/article/index'
		},
		{
			imageurl: 'Home/xiehui.png',
			title: '协会会员',
			subtitle: '展现会员风采',
			gopages: '/pages/member/index'
		},
		{
			imageurl: 'Home/remen.png',
			title: '热门活动',
			subtitle: '获取最新活动',
			gopages: '/pages/activity/index'
		},
		{
			imageurl: 'Home/jiaoliu.png',
			title: '企业动态',
			subtitle: '方便信息交流',
			gopages: '/pages/square/index'
		},
	])
</script>


<style scoped lang="scss">
	.content {
		width: 750rpx;
		height: 100vh;

		.content-header-bg {
			font-family: Alibaba PuHuiTi;
			font-weight: bold;
			font-size: 36rpx;
			color: #202020;
			width: 750rpx;
			height: 270rpx;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			background: linear-gradient(180deg, #4D80F6, #FFFFFF);
		}

		.ScrollView {
			margin-top: -65rpx;
			height: calc(100vh - 206rpx);
			box-sizing: border-box;

			// padding: 0 30rpx;
			.publicstyle {
				padding: 0 40rpx;
			}

			.swiperBox {
				width: 100%;
				height: 340rpx;

				::v-deep .u-swiper {
					width: 670rpx;
					height: 340rpx !important;

					.u-swiper__wrapper {
						width: 670rpx;
						height: 340rpx !important;

						.u-swiper__wrapper__item__wrapper__image {
							height: 340rpx !important;
						}
					}

					.u-swiper__indicator {
						bottom: 80rpx !important;
					}
				}

			}

			.CommonservicesBox {
				margin-top: 50rpx;
			}

			.common-tab {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.tabBox {
					display: flex;
					align-items: center;

					.common-image {
						width: 148rpx;
						height: 148rpx;
					}

					.titleBox {

						.title {
							font-family: Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 28rpx;
							color: #303030;
						}

						.subtitle {
							margin-top: 15rpx;
							font-family: Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 24rpx;
							color: #BBC0CA;
						}
					}
				}
			}

			.singleimage {
				margin-top: 27rpx;

				image {
					width: 100%;
					height: 198rpx;
				}
			}

			.memberBox {
				margin-top: 69rpx;

				.memberBox-tabs {
					margin-top: 85rpx;
					display: flex;
					align-items: center;
					.tabs-item {
						margin-left: 25rpx;
						// padding: 0 29rpx;
						width: 208rpx;
						position: relative;
						.item-avatar {
							width: 120rpx;
							height: 120rpx;
							background-color: #ffffff;
							border: 10rpx solid #D3E0FF;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 50%;
							position: absolute;
							left: 22%;
							top: -60rpx;
							z-index: 10;

							.avatarimage {
								width: 108rpx;
								height: 108rpx;
								border-radius: 50%;
							}
						}

						.item-content {
							width: 100%;
							height: 252rpx;
							background: linear-gradient(180deg, #D2E0FF, rgba(210, 224, 255, 0.18));
							border-radius: 12rpx;
							padding: 54rpx 24rpx 0;
							display: flex;
							flex-direction: column;
							align-items: center;
							position: relative;

							.identity {
								// width: 115rpx;
								position: absolute;
								z-index: 12;
								// height: 32rpx;
								background: linear-gradient(90deg, #F0C552 0%, #EDD596 100%);
								border-radius: 4rpx;
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 20rpx;
								// line-height: 20rpx;
								padding: 6rpx 8rpx;
								color: #675B3A;
								top: 40rpx;
								// margin-top: 54rpx;
							}

							.namestyle {
								font-family: Alibaba PuHuiTi;
								font-weight: 500;
								font-size: 28rpx;
								color: #303030;
								margin-top: 33rpx;
							}

							.companystyle {
								text-align: center;
								margin-top: 19rpx;
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 22rpx;
								color: #BBC0CA;
							}
						}
					}

					.tabs-item:first-child {
						margin-left: 0;
					}
				}
			}

			.activityBox {
				margin-top: 57rpx;

				.activityBox-tabs {
					margin-top: 37rpx;

					.activityBox-tabs-item {
						position: relative;
						width: 670rpx;
						// height: 340rpx;
						padding: 230rpx 34rpx 20rpx;
						border-radius: 10rpx;
						background: linear-gradient(0deg, #161616, rgba(32, 32, 32, 0));
						border-radius: 20rpx;

						.bgimage {
							position: absolute;
							z-index: -10;
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;
						}

						.content-text {
							.p1 {
								font-family: Alibaba PuHuiTi;
								font-weight: 500;
								font-size: 30rpx;
								color: #FFFFFF;
							}

							.p2 {
								margin-top: 14rpx;
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 22rpx;
								color: #EBEBEB;

								.labelstyle1 {
									background: #2854B7;
									border-radius: 4px;
									padding: 4rpx 6rpx;
									margin-right: 15rpx;
									font-family: Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 20rpx;
									color: #FFFFFF;
								}

								.labelstyle {
									background: #898989;
									border-radius: 4px;
									padding: 4rpx 6rpx;
									margin-right: 15rpx;
									font-family: Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 20rpx;
									color: #FFFFFF;
								}
							}
						}
					}
				}
			}

			.Policyinterpretation {
				margin-top: 79rpx;

				.Policyinterprcetation-Box {
					.Box-item {
						margin-top: 26rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.item-left {
							width: 300rpx;
							height: 200rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.item-right {
							width: 346rpx;
							height: 200rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							flex-direction: column;
							padding: 13rpx 0;

							.title {
								font-family: Alibaba PuHuiTi;
								font-weight: 500;
								font-size: 28rpx;
								color: #303030;
							}

							.right-numanddate {
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;
								font-family: Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #BBC0CA;
							}
						}
					}
				}
			}

			.CommerceBox {
				margin-top: 60rpx;
				// padding: 0 40rpx;

				.CommerceBox-tabs {
					margin-top: 35rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 6rpx;

					.CommerceBox-tabs-item {
						width: 200rpx;
						height: 272rpx;
						background: #FFFFFF;
						border-radius: 12rpx;
						padding: 35rpx 30rpx 0;
						text-align: center;
						box-shadow: 0px 0px 21px 4px rgba(216, 217, 219, 0.56);

						image {
							width: 126rpx;
							height: 126rpx;
						}

						.Commercetext {
							text-align: center;
							margin-top: 20rpx;
							font-family: Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 26rpx;
							color: #303030;
						}
					}

					.CommerceBox-tabs-item:first-child {
						margin-left: 0;
					}


				}

			}
		}
	}
</style>